<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资产上链 - AssetVerify</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E7ED',
                            300: '#C0C6CF',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1E1E20',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 12px 0 rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 4px 20px 0 rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/95 shadow-sm">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="flex items-center">
                        <div class="bg-primary text-white p-2 rounded-lg mr-2">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <span class="text-xl font-bold text-neutral-700">AssetVerify</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">首页</a>
                    <a href="create.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">创建资产</a>
                    <a href="register.html" class="text-primary font-medium border-b-2 border-primary pb-1">资产上链</a>
                    <a href="query.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">查询资产</a>
                    <a href="transfer.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">转移资产</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="menu-toggle" class="text-neutral-600 hover:text-primary focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-neutral-200">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">首页</a>
                <a href="create.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">创建资产</a>
                <a href="register.html" class="block px-3 py-2 rounded-md text-base font-medium text-primary bg-primary/5">资产上链</a>
                <a href="query.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">查询资产</a>
                <a href="transfer.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">转移资产</a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow pt-24 pb-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-neutral-700">资产上链</h1>
                <p class="mt-4 text-neutral-500 max-w-2xl mx-auto">
                    将您的资产信息永久记录在区块链上，获得不可篡改的公证证明。
                </p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="bg-white rounded-xl shadow-card p-8 border border-neutral-200">
                    <div class="flex items-center justify-between mb-8">
                        <h2 class="text-xl font-semibold text-neutral-700">待上链资产</h2>
                        <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">未上链</span>
                    </div>
                    
                    <div class="border border-neutral-200 rounded-lg p-6 mb-8">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-neutral-500 mb-1">资产ID</label>
                                    <p class="font-medium text-neutral-700">ASSET-20250527-K8F3A9</p>
                                </div>
                                
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-neutral-500 mb-1">资产名称</label>
                                    <p class="font-medium text-neutral-700">数字艺术品《星云》</p>
                                </div>
                                
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-neutral-500 mb-1">资产类型</label>
                                    <p class="font-medium text-neutral-700">数字资产</p>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-500 mb-1">资产所有者</label>
                                    <p class="font-medium text-neutral-700">张三</p>
                                </div>
                            </div>
                            
                            <div>
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-neutral-500 mb-1">创建日期</label>
                                    <p class="font-medium text-neutral-700">2025-05-27</p>
                                </div>
                                
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-neutral-500 mb-1">文件大小</label>
                                    <p class="font-medium text-neutral-700">2.4 MB</p>
                                </div>
                                
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-neutral-500 mb-1">文件类型</label>
                                    <p class="font-medium text-neutral-700">JPEG 图像</p>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-500 mb-1">状态</label>
                                    <p class="font-medium text-neutral-700">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                            <span class="w-1.5 h-1.5 mr-1.5 bg-yellow-800 rounded-full"></span>
                                            待上链
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <label class="block text-sm font-medium text-neutral-500 mb-2">资产描述</label>
                            <p class="text-neutral-700">
                                这是一幅由著名数字艺术家创作的限量版艺术品，区块链确保其唯一性和版权归属。作品采用抽象表现主义风格，以宇宙星云为主题，色彩斑斓，视觉冲击力强。
                            </p>
                        </div>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-neutral-700 mb-4">上链信息确认</h3>
                        
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="confirm-1" name="confirm-1" type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-neutral-300 rounded">
                                </div>
                                <div class="ml-3 text-sm">
                                    <label for="confirm-1" class="text-neutral-600">我确认以上资产信息真实准确，无虚假内容</label>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="confirm-2" name="confirm-2" type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-neutral-300 rounded">
                                </div>
                                <div class="ml-3 text-sm">
                                    <label for="confirm-2" class="text-neutral-600">我确认我拥有该资产的合法所有权或处置权</label>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="confirm-3" name="confirm-3" type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-neutral-300 rounded">
                                </div>
                                <div class="ml-3 text-sm">
                                    <label for="confirm-3" class="text-neutral-600">我已阅读并同意<a href="#" class="text-primary hover:underline">《资产上链服务条款》</a>和<a href="#" class="text-primary hover:underline">《隐私政策》</a></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <div>
                            <h3 class="text-lg font-semibold text-neutral-700 mb-4">上链费用</h3>
                            
                            <div class="bg-neutral-50 rounded-lg p-4">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-neutral-600">基础服务费</span>
                                    <span class="font-medium text-neutral-700">¥199.00</span>
                                </div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-neutral-600">区块链交易费</span>
                                    <span class="font-medium text-neutral-700">¥89.00</span>
                                </div>
                                <div class="flex justify-between items-center pt-2 border-t border-neutral-200">
                                    <span class="font-medium text-neutral-700">总计</span>
                                    <span class="font-bold text-lg text-primary">¥288.00</span>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-semibold text-neutral-700 mb-4">支付方式</h3>
                            
                            <div class="space-y-3">
                                <div class="relative">
                                    <input type="radio" id="payment-wechat" name="payment" class="hidden peer">
                                    <label for="payment-wechat" class="flex items-center justify-between p-4 border border-neutral-300 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-custom">
                                        <div class="flex items-center">
                                            <i class="fa fa-weixin text-2xl text-green-500 mr-3"></i>
                                            <span class="font-medium text-neutral-700">微信支付</span>
                                        </div>
                                        <div class="opacity-0 peer-checked:opacity-100 transition-opacity">
                                            <i class="fa fa-check-circle text-primary"></i>
                                        </div>
                                    </label>
                                </div>
                                
                                <div class="relative">
                                    <input type="radio" id="payment-alipay" name="payment" class="hidden peer" checked>
                                    <label for="payment-alipay" class="flex items-center justify-between p-4 border border-neutral-300 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-custom">
                                        <div class="flex items-center">
                                            <i class="fa fa-credit-card text-2xl text-blue-500 mr-3"></i>
                                            <span class="font-medium text-neutral-700">支付宝</span>
                                        </div>
                                        <div class="opacity-0 peer-checked:opacity-100 transition-opacity">
                                            <i class="fa fa-check-circle text-primary"></i>
                                        </div>
                                    </label>
                                </div>
                                
                                <div class="relative">
                                    <input type="radio" id="payment-bank" name="payment" class="hidden peer">
                                    <label for="payment-bank" class="flex items-center justify-between p-4 border border-neutral-300 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-custom">
                                        <div class="flex items-center">
                                            <i class="fa fa-university text-2xl text-neutral-700 mr-3"></i>
                                            <span class="font-medium text-neutral-700">银行转账</span>
                                        </div>
                                        <div class="opacity-0 peer-checked:opacity-100 transition-opacity">
                                            <i class="fa fa-check-circle text-primary"></i>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row sm:justify-end gap-4">
                        <button type="button" class="px-6 py-3 border border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-custom font-medium">
                            返回
                        </button>
                        <button id="submit-register" type="button" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg transition-custom font-medium flex items-center justify-center">
                            <i class="fa fa-chain mr-2"></i> 确认上链
                        </button>
                    </div>
                </div>
                
                <div class="mt-12 bg-white rounded-xl shadow-card p-8 border border-neutral-200">
                    <h3 class="text-xl font-semibold text-neutral-700 mb-6">为什么要进行资产上链？</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="flex">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-lock text-xl text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-neutral-700">不可篡改</h4>
                                <p class="text-neutral-500 mt-1">
                                    区块链技术确保数据一旦记录就无法篡改，为您的资产提供永久可靠的证明。
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-globe text-xl text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-neutral-700">全球认可</h4>
                                <p class="text-neutral-500 mt-1">
                                    区块链记录具有全球通用性，您的资产证明在全球范围内都具有法律效力。
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-search text-xl text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-neutral-700">随时查询</h4>
                                <p class="text-neutral-500 mt-1">
                                    您可以随时通过资产ID查询资产的上链信息，验证资产的真实性和所有权。
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-balance-scale text-xl text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-neutral-700">法律保障</h4>
                                <p class="text-neutral-500 mt-1">
                                    我们的区块链公证服务符合国际法律标准，在法律纠纷中具有重要的证据价值。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral-800 text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center mb-6">
                        <div class="bg-primary text-white p-2 rounded-lg mr-2">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">AssetVerify</span>
                    </div>
                    <p class="text-neutral-400 mb-6">
                        专业的区块链资产公证平台，为您的资产提供安全、透明、可信的公证服务。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-twitter"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-neutral-400 hover:text-white transition-custom">首页</a></li>
                        <li><a href="create.html" class="text-neutral-400 hover:text-white transition-custom">创建资产</a></li>
                        <li><a href="register.html" class="text-neutral-400 hover:text-white transition-custom">资产上链</a></li>
                        <li><a href="query.html" class="text-neutral-400 hover:text-white transition-custom">查询资产</a></li>
                        <li><a href="transfer.html" class="text-neutral-400 hover:text-white transition-custom">转移资产</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">服务支持</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">帮助中心</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">常见问题</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">使用教程</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">法律条款</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">隐私政策</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">北京市海淀区中关村科技园区8号楼15层</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">contact@assetverify.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">+86 10 8888 8888</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-clock-o mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">周一至周五: 9:00 - 18:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-neutral-700 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-neutral-500 text-sm">
                        &copy; 2025 AssetVerify. 保留所有权利。
                    </p>
                    <div class="mt-4 md:mt-0">
                        <ul class="flex space-x-6">
                            <li><a href="#" class="text-neutral-500 hover:text-white text-sm transition-custom">隐私政策</a></li>
                            <li><a href="#" class="text-neutral-500 hover:text-white text-sm transition-custom">服务条款</a></li>
                            <li><a href="#" class="text-neutral-500 hover:text-white text-sm transition-custom">Cookie政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('bg-white/95');
                navbar.classList.add('bg-white');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('bg-white/95');
                navbar.classList.remove('bg-white');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 上链按钮点击处理
        document.getElementById('submit-register').addEventListener('click', function() {
            // 检查是否勾选所有确认项
            const confirm1 = document.getElementById('confirm-1').checked;
            const confirm2 = document.getElementById('confirm-2').checked;
            const confirm3 = document.getElementById('confirm-3').checked;
            
            if (!confirm1 || !confirm2 || !confirm3) {
                alert('请勾选所有确认项后再提交');
                return;
            }
            
            // 显示确认对话框
            if (confirm('确认提交资产上链请求？此操作将产生¥288.00的费用。')) {
                // 显示加载状态
                this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 处理中...';
                this.disabled = true;
                
                // 模拟API请求延迟
                setTimeout(() => {
                    // 显示成功消息
                    alert('资产上链请求已提交！我们将在15分钟内完成上链操作，您可以在"查询资产"页面查看处理状态。');
                    
                    // 重置按钮状态
                    this.innerHTML = '<i class="fa fa-chain mr-2"></i> 确认上链';
                    this.disabled = false;
                    
                    // 跳转到查询页面
                    window.location.href = 'query.html';
                }, 2000);
            }
        });
    </script>
</body>
</html>
    